<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>系统登录</title>
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body class="login-bg">

<div class="login" id="app">
    <div class="message">系统登录</div>
    <div id="darkbannerwrap"></div>
    <form method="post" class="layui-form" >
        <el-input
                placeholder="请输入用户名"
                v-model="userInfo.uid"
                clearable >
        </el-input>
        <hr class="hr15">
        <el-input
                placeholder="请输入密码"
                v-model="userInfo.passWord"
                clearable show-password>
        </el-input>
        <hr class="hr15">
        <div align="middle">
        <el-button type="primary" plain style="width:75%" @click="click">登陆</el-button></div>
        <hr class="hr20" >

    </form>

</div>

<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script src="/js/x-layui.js" charset="utf-8"></script>
<!--导入Vue、js脚本-->
<script src="/js/vue.js" charset="utf-8" type="text/javascript"></script>
<!--引入ELementUI组件库-->
<script src="/js/index.js" charset="utf-8"></script>
<!--引入Axios  js脚本-->
<script src="/js/axios.js" charset="utf-8" type="text/javascript"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            userInfo:{"uid":"","passWord":""},
            flag:1
        //1：用户名不存在    2：密码不对  3: 学生   4：管理员
        },
        methods:{

            click(){
                axios.post("/dormitory/login",this.userInfo).then((res)=>{
                    app.flag=res.data;
                    if(app.flag===3) {
                        this.$message({
                            dangerouslyUseHTMLString: true,
                            message: "登陆状态：成功 " + "<br/>账户类型：学生",
                            type: 'success'
                        });
                        var h="window.location.href='http://localhost:8080/student.html?uid="+this.userInfo.uid+"'";
                        setTimeout(h,2000);
                        //window.location.href="http://localhost:8080/student.html?uid="+this.userInfo.uid;
                    }else if(app.flag===4){
                        this.$message({
                            dangerouslyUseHTMLString: true,
                            message: "登陆状态：成功 " + "<br/>账户类型：管理员",
                            type: 'success'
                        });
                        var h="window.location.href='http://localhost:8080/master.html?uid="+this.userInfo.uid+"'";
                        setTimeout(h,2000);
                        //window.location.href="http://localhost:8080/master.html?uid="+this.userInfo.uid;
                    }else if(app.flag===1){
                        this.$message({
                            dangerouslyUseHTMLString: true,
                            message: "登陆状态：失败  原因：用户名不存在" ,
                            type: 'error'
                        });
                    }else if(app.flag===2){
                        this.$message({
                            dangerouslyUseHTMLString: true,
                            message: "登陆状态：失败 原因：密码错误" ,
                            type: 'error'
                        });
                    }

                });
            }
        }

    })

</script>


<!-- 底部结束 -->

</body>
</html>